// 1. 组件直接定义为 async (异步函数)
// 这意味着这个组件是在服务器上运行的，类似于 Java 的 Controller
interface Geo {
  lat: string;
  lng: string;
}

interface Address {
  street: string;
  suite: string;
  city: string;
  zipcode: string;
  geo: Geo;
}

interface Company {
  name: string;
  catchPhrase: string;
  bs: string;
}
//  定义了一个 User 类， 然后注意 address 也是一个对象，同理 company 也是一个对象
interface User {
  id: number;
  name: string;
  username: string;
  email: string;
  address: Address;
  phone: string;
  website: string;
  company: Company;
}
export default async function UserPage() {
  console.log("--- 🔍 我是在哪里运行的？ ---"); // <--- 加上这一行
  const response = await fetch("https://jsonplaceholder.typicode.com/users/1", {
    cache: "no-store",
  });
  const data: User = await response.json();
  // 3. 直接渲染数据
  // 当浏览器收到这个页面时，HTML 里已经是填充好数据的了（没有 Loading 转圈）
  return (
    <div style={{ padding: "50px", fontFamily: "sans-serif" }}>
      <h1>Next.js 服务器组件 (Server Component)</h1>
      <div
        style={{
          border: "1px solid #0070f3",
          padding: "20px",
          borderRadius: "10px",
          backgroundColor: "#f0f8ff",
        }}
      >
        <h3>👋 你好, {data.name}</h3>
        <p>ID: {data.id}</p>
        <p>姓名: {data.name}</p>
        <p>用户名: {data.username}</p>
        <p>邮箱: {data.email}</p>
        <p>地址: {data.address.street}</p>
        <p>电话: {data.phone}</p>
        <p>网址: {data.website}</p>
        <p>公司: {data.company.name}</p>
        <p style={{ color: "#666", marginTop: "20px" }}>
          (提示：查看网页源代码，你会发现这些数据直接就在 HTML 里，而不是通过 JS
          后加载的)
        </p>
      </div>
    </div>
  );
}
